<template>
	<view class="container">
		<!-- 顶部导航标签 -->
		<view class="nav-tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in navTabs" 
				:key="index"
				:class="{ active: activeTab === index }"
				@click="setActiveTab(index)"
			>
				<text class="tab-text">{{tab}}</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<view class="search-icon">🔍</view>
				<input class="search-input" placeholder="搜索商品名称/订单编号/批次号" />
				<button class="search-btn">搜索</button>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y="true">
			<!-- 第一个订单 -->
			<view class="order-item">
				<view class="order-header">
					<view class="order-info">
						<view class="order-number">
							<text class="label">订单号: </text>
							<text class="number">YT87897079778868686588</text>
							<button class="copy-btn">复制</button>
						</view>
						<view class="user-info">用户名称 18790784768 2024-01-12 11:20:20</view>
					</view>
					<view class="order-status completed">已完成</view>
				</view>

				<view class="shop-info">
					<text class="shop-name">店铺名称名称名称名称名称...</text>
					<view class="arrow">></view>
				</view>

				<view class="product-preview">
					<scroll-view class="product-thumbnails" scroll-x="true">
						<view class="thumbnail-item" v-for="(item, index) in order1.products" :key="index">
							<image class="thumbnail-image" :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="more-indicator">...</view>
					</scroll-view>
				</view>

				<view class="order-summary">
					<text class="summary-text">共{{order1.productCount}}种商品 合计: <text class="total-price">¥{{order1.totalPrice}}</text></text>
				</view>

				<view class="action-buttons">
					<button class="action-btn">更多</button>
					<button class="action-btn">删除订单</button>
					<button class="action-btn">申请售后</button>
					<button class="action-btn primary">再次购买</button>
				</view>
			</view>

			<!-- 第二个订单 -->
			<view class="order-item">
				<view class="order-header">
					<view class="order-info">
						<view class="order-number">
							<text class="label">订单号: </text>
							<text class="number">YT87897079778868686588</text>
							<button class="copy-btn">复制</button>
						</view>
						<view class="user-info">用户名称 18790784768 2024-01-12 11:20:20</view>
					</view>
					<view class="order-status cancelled">已取消</view>
				</view>

				<view class="shop-info">
					<text class="shop-name">店铺名称名称名称名称名称...</text>
					<view class="arrow">></view>
				</view>

				<view class="product-details">
					<view class="product-item" v-for="(product, index) in order2.products" :key="index">
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-name">{{product.name}}</view>
							<view class="product-spec">规格: {{product.specification}}</view>
							<view class="product-price">¥{{product.price}}</view>
						</view>
						<view class="product-quantity">x{{product.quantity}}</view>
					</view>
				</view>

				<view class="order-summary">
					<text class="summary-text">共{{order2.productCount}}件商品 合计: <text class="total-price">¥{{order2.totalPrice}}</text></text>
				</view>

				<view class="action-buttons">
					<button class="action-btn">更多</button>
					<button class="action-btn">删除订单</button>
					<button class="action-btn">申请售后</button>
					<button class="action-btn primary">再次购买</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				navTabs: ['全部', '待付款', '待发货', '待收货', '待售后', '已完成'],
				order1: {
					productCount: 1,
					totalPrice: '45.56',
					products: [
						{ image: '/static/apple-bowl1.png' },
						{ image: '/static/apple-bowl2.png' },
						{ image: '/static/apple-bowl3.png' },
						{ image: '/static/apple-bowl4.png' },
						{ image: '/static/apple-bowl5.png' },
						{ image: '/static/apple-bowl6.png' },
						{ image: '/static/apple-bowl7.png' }
					]
				},
				order2: {
					productCount: 3,
					totalPrice: '155.56',
					products: [
						{
							image: '/static/apple-bowl.png',
							name: '云南鲜甜青苹果',
							specification: '2.5kg',
							price: '45.56',
							quantity: 1
						},
						{
							image: '/static/apple-bowl.png',
							name: '云南鲜甜青苹果',
							specification: '2.5kg',
							price: '85.56',
							quantity: 2
						}
					]
				}
			}
		},
		methods: {
			setActiveTab(index) {
				this.activeTab = index;
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航标签样式 */
.nav-tabs {
	display: flex;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	overflow-x: auto;
}

.tab-item {
	padding: 30rpx 40rpx;
	white-space: nowrap;
	position: relative;
}

.tab-item.active {
	color: #ff6b35;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #ff6b35;
	border-radius: 2rpx;
}

.tab-text {
	font-size: 28rpx;
	color: #333;
}

/* 搜索栏样式 */
.search-section {
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 25rpx;
	padding: 15rpx 20rpx;
	gap: 15rpx;
}

.search-icon {
	font-size: 32rpx;
	color: #666;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
}

.search-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
}

/* 订单列表样式 */
.order-list {
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 订单头部样式 */
.order-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.order-info {
	flex: 1;
}

.order-number {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 10rpx;
}

.label {
	font-size: 26rpx;
	color: #666;
}

.number {
	font-size: 26rpx;
	color: #333;
	font-family: monospace;
}

.copy-btn {
	background-color: #f8f8f8;
	color: #666;
	border: 1rpx solid #ddd;
	border-radius: 15rpx;
	padding: 8rpx 16rpx;
	font-size: 22rpx;
}

.user-info {
	font-size: 24rpx;
	color: #999;
}

.order-status {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: bold;
}

.order-status.completed {
	background-color: #e3f2fd;
	color: #1976d2;
}

.order-status.cancelled {
	background-color: #ffebee;
	color: #d32f2f;
}

/* 店铺信息样式 */
.shop-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.shop-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.arrow {
	font-size: 24rpx;
	color: #999;
}

/* 商品预览样式 */
.product-preview {
	margin-bottom: 20rpx;
}

.product-thumbnails {
	white-space: nowrap;
}

.thumbnail-item {
	display: inline-block;
	margin-right: 15rpx;
}

.thumbnail-image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 2rpx solid #f0f0f0;
}

.more-indicator {
	display: inline-block;
	font-size: 24rpx;
	color: #999;
	margin-left: 10rpx;
}

/* 商品详情样式 */
.product-details {
	margin-bottom: 20rpx;
}

.product-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 15rpx;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 8rpx;
}

.product-price {
	font-size: 26rpx;
	color: #ff4757;
	font-weight: bold;
}

.product-quantity {
	font-size: 26rpx;
	color: #666;
}

/* 订单汇总样式 */
.order-summary {
	padding: 20rpx 0;
	border-top: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.summary-text {
	font-size: 26rpx;
	color: #333;
}

.total-price {
	color: #ff4757;
	font-weight: bold;
}

/* 操作按钮样式 */
.action-buttons {
	display: flex;
	gap: 20rpx;
	flex-wrap: wrap;
}

.action-btn {
	padding: 15rpx 25rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	border: 1rpx solid #ddd;
	background-color: #fff;
	color: #666;
}

.action-btn.primary {
	background-color: #fff;
	color: #ff6b35;
	border-color: #ff6b35;
}

.action-btn:hover {
	opacity: 0.8;
}
</style>